import React from 'react';
import { connect } from 'dva'

import { Table } from 'antd';
import style from './style/HeavyCablibers.less';

@connect(({ watermeter }) => ({ ...watermeter }))
class HeavyCablibers extends React.Component {
  columns = [
    { title: '编号', key: 'idx',  dataIndex: 'idx', render: (t, r, i) => `${i + 1}` },
    { title: '户号', key: 'no', dataIndex: 'no' },
    { title: '用户名称', key: 'name', dataIndex: 'name' },
    { title: '电话号码', key: 'mobile', dataIndex: 'mobile' },
    { title: '安装位置', key: 'address', dataIndex: 'address' },
    { title: '用水量(m3)', key: 'qty', dataIndex: 'qty' },
    { title: '剩余金额(元)', key: 'amount', dataIndex: 'amount' },
    { title: '计算时间', key: 'readIngTime', dataIndex: 'readIngTime' },
  ]

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
    }
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateIndicators()
  }
  setDateIndicators = async () => {
    const server = {
      type: 'watermeter/queryMaxAccount',
      payload: {
        loading: true
      }
    }
    if (server) this.queryServer(server);
  }
  queryServer = async (server) => {
    this.props.dispatch(server);
  }

  // 隔行换色
  setRowClassName = (record, index) => {
    const doubleRow = style.doubleRow;
    if (index % 2 !== 0) {
      return doubleRow;
    }
  };
  // 指标渲染
  render() {
    const { props, columns } = this;
    const { MaxAccountResource, MaxAccountLoading: loading } = props;

    let dataSource = [];
    if (Array.isArray(MaxAccountResource.data)) {
      const { data } = MaxAccountResource
      dataSource = data;
    }

    return (<>
      <Table
        className={style.main}
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        rowClassName={this.setRowClassName}
        // style={{
        //   height: '400px',
        // }}
        // scroll={{ y: 400 }}
        bordered
      />
    </>);
  }
}

export default HeavyCablibers;
